<template>
  <div class="page-wrapper">
    <div class="user-info">
      <img src="@/assets/images/user-info-bg.png" class="user-bg" />
      <div class="content">
        <div class="avatar" @click="toEditAvatar">
          <van-image width="50" height="50" round fit="cover" :src="userInfo ? userInfo.avatar : ''"/>
        </div>
        <div class="info">
          <div class="name" @click="toEditAvatar" v-if="userInfo && userInfo.nickname">{{ userInfo ? userInfo.nickname : '' }}</div>
          <div class="name" v-else>点击授权</div>
          <van-tag v-if="userInfo && userInfo.level_name" color="#E5E4E6" text-color="#212121">{{userInfo ? userInfo.level_name : ''}}</van-tag>
        </div>
      </div>
    </div>
    <div class="my-wrapper">
      <div class="datas">
        <div v-if="userInfo && userInfo.credit && userInfo.credit.is_show" class="data-item">
          <div class="data">¥{{userInfo ? userInfo.credit.data : 0}}</div>
          <div class="name">{{userInfo ? userInfo.credit.text : ''}}</div>
        </div>
        <div v-if="userInfo && userInfo.integral && userInfo.integral.is_show" class="data-item">
          <div class="data">{{userInfo ? userInfo.integral.data : 0}}</div>
          <div class="name">{{userInfo ? userInfo.integral.text : ''}}</div>
        </div>
      </div>
      <div class="vip" v-if="!userInfo || userInfo.next_level">
        <div class="top">
          <div class="left">
            <span class="name">至尊会员卡</span>
            <van-tag color="#FFD19C" text-color="#484856">VIP</van-tag>
          </div>
          <van-button class="activate-button" size="small" color="linear-gradient(to right, #FEE2BD, #FFD4A1)" @click="buyVip">立即开通</van-button>
        </div>
        <van-divider customStyle="border-color: #57525E;" />
        <div class="bottom">立即开卡，尊享超值权益</div>
      </div>

      <div class="category-title">
        <div class="title">商城订单</div>
        <div class="right" @click="gotoAllOrderList">
          <div>全部订单</div>
          <van-icon name="arrow" />
        </div>
      </div>
      <van-grid :column-num="orderList.length" :border="false" class="order-list">
        <van-grid-item
          use-slot
          v-for="item in orderList"
          :key="item.id"
          @click="gotoOrderList(item.status)"
          class="order-item"
        >
          <img :src="item.icon" class="order-icon" />
          {{ item.text }}
          <div class="badge" v-if="item.total > 0">{{ item.total && item.total > 99 ? '99+' : item.total }}</div>
        </van-grid-item>
      </van-grid>

      <van-row class="gift" gutter="2">
        <van-col class="gift-item" span="12">
          <img src="@/assets/images/welcom-bg.png" />
          <div class="text">
            <div class="title">欢迎礼</div>
            <div class="sub">领取会员卡</div>
            <div class="sub">享部分商品9折</div>
          </div>
        </van-col>
        <van-col class="gift-item" span="12">
          <img src="@/assets/images/share-bg.png" />
          <div class="text">
            <div class="title">分享礼</div>
            <div class="sub">邀请有礼</div>
            <div class="sub">享500元购物金</div>
          </div>
        </van-col>
      </van-row>

      <div class="category-title">
        <div class="title">服务与功能</div>
      </div>
      <van-grid column-num="4" :border="false" class="service-list">
        <van-grid-item
          use-slot
          v-for="item in serviceList"
          :key="item.id"
          @click="serviceClick(item)"
        >
          <img :src="item.icon" class="service-icon" />
          {{ item.text }}
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import member_new_controller from './member_new_controller';

export default member_new_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.page-wrapper {
  background-color: #ffffff;
  text-align: left;

  .user-info {
    position: relative;
    overflow: hidden;

    .user-bg {
      width: 100%;
    }

    .content {
      position: absolute;
      top: 40px;
      left: 16px;
      width: 100%;
      display: flex;

      .avatar {
        margin-right: 12px;
      }

      .info {

        .name {
          color: #212121;
          font-size: 16px;
        }
      }
    }
  }

  .my-wrapper {
    margin: 0 16px;
    overflow: hidden;

    .datas {
      display: flex;
      margin-bottom: 20px;

      .data-item {
        flex: 1;
        text-align: center;

        .data {
          font-size: 16px;
        }
      }
    }

    .vip {
      background-color: #484856;
      padding: 12px;
      border-radius: 6px;

      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
          display: flex;
          align-items: center;

          .name {
            color: #FFD19C;
            font-size: 16px;
            margin-right: 4px;
          }
        }

        .activate-button {
          color: #484856!important;
        }
      }

      .bottom {
        color: #B2967C;
        font-size: 12px;
      }
    }

    .category-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 20px 0 10px;

      .title {
        font-size: 20px;
        color: #212121;
      }

      .right {
        display: flex;
        align-items: center;
        color: #A5A5A5;
      }
    }

    .order-list {
      
      .order-icon {
        width: 25px;
        margin-bottom: 5px;  
      }

      .order-item {
        position: relative;

        .badge {
          position: absolute;
          top: 5px;
          left: 50%;
          margin-left: 10px;
          border: 1px solid #DF5F59;
          color: #DF5F59;
          font-size: 11px;
          height: 14px;
          border-radius: 7px;
          line-height: 12px;
          min-width: 14px;
          text-align: center;
          padding: 0 4px;
        }
      }
    }

    .gift {
      margin-top: 24px;

      .gift-item {
        position: relative;

        img {
          width: 100%;
        }

        .text {
          position: absolute;
          top: 5px;
          left: 12px;

          .title {
            font-size: 20px;
            font-weight: bold;
          }
        }
      }
    }

    .service-list {

      .service-icon {
        width: 25px;
        margin-bottom: 5px;
      }
    } 
  }
}
</style>